---
title: Badge
sidebar:
  order: 4
---

import Preview from "../../../components/Preview.astro";

Displays a badge or a component that looks like a badge.

## Primary

<Preview src="badge?style=primary">

```dart
ShadBadge(
  child: const Text('Primary'),
)
```

</Preview>

## Secondary

<Preview src="badge?style=secondary">

```dart
ShadBadge.secondary(
  child: const Text('Secondary'),
)
```

</Preview>

## Destructive

<Preview src="badge?style=destructive">

```dart
ShadBadge.destructive(
  child: const Text('Destructive'),
)
```

</Preview>

## Outline

<Preview src="badge?style=outline">

```dart
ShadBadge.outline(
  child: const Text('Outline'),
)
```

</Preview>
